<template>  
  <div class="welcome-page">
	<img src="../assets/img/llogo.png" alt="品牌Logo" class="logo">
    <h1 class="title">人事管理系统</h1>  
  </div>
</template>  
  
<script>  
export default {  
  name: 'WelcomePage',  
  // 你可以在这里添加更多的组件逻辑，比如从API获取数据等  
  // 但对于一个简单的欢迎页面，可能不需要复杂的逻辑  
}  
</script>  
  
<style scoped>  
.welcome-page {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh; /* 使页面高度占满整个视口 */  
  text-align: center;  
  background-color: #f0f2f5; /* 浅灰色背景 */  
}   
.title {  
  color: #333; /* 深灰色标题 */  
  font-size: 4em; /* 较大的字体大小 */  
  margin-bottom: 20px; /* 标题和副标题之间的间距 */  
}  
.subtitle {  
  color: #666; /* 浅灰色副标题 */  
  font-size: 2em; /* 适中的字体大小 */
}
.logo 
{  
  width: 200px; /* 设置logo的宽度 */  
  /* height: auto; 如果需要，可以添加这一行来确保图像保持其宽高比 */  
}   
</style>